<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Col span="24">
            <Card>
                <p slot="title">
                    <Icon type="ios-person"></Icon>
                    角色管理
                </p>
                <Row>
                    <Input v-model="roleName" placeholder="请输入角色..." style="width: 200px"/>
                    <span @click="handleSearchs()" style="margin: 0 10px;"><Button type="primary"
                                                                                   icon="search">搜索</Button></span>
                    <span @click="handleRefreshs()" style="margin: 0 10px;"><Button type="primary"
                                                                                    icon="refresh">刷新</Button></span>
                </Row>
                <Row>
                    <Button style="width: auto;text-align:right;margin:15px 0 0 0;" icon="plus" type="primary"
                            @click="openModal(null)" long>{{ $t('btnAddText') }}
                    </Button>
                </Row>
                <br/>
                <Row>
                    <template>
                        <Table border :columns="columns" :data="roleData" @on-sort-change="sortClick"></Table>
                    </template>
                </Row>
                <Row class="margin-top-10" style="text-align: right;padding-right:20px;">
                    <Page :total="total" :current="pageNum" :page-size="pageSize" @on-change="handleCurrentChange"
                          @on-page-size-change="handleSizeChange"
                          size="small" show-elevator show-sizer></Page>
                </Row>
            </Card>
            <AddRole v-if="addRoleModal" @cancel="onModalCancel"/>
            <UpdateRole v-if="updateRoleModal" :roleId="chooseRoleId" @cancel="onModalCancel"/>
            <DeleteRole v-if="deleteRoleModal" :roleId="chooseRoleId" :roleName="chooseRoleName"
                        @cancel="onModalCancel"/>
            <AddPermission v-if="addPermissionModal" :roleId="chooseRoleId" @cancel="onModalCancel"/>
        </Col>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    import AddRole from './components/role/addRole.vue';
    import UpdateRole from './components/role/updateRole.vue';
    import DeleteRole from './components/role/deleteRole.vue';
    import AddPermission from './components/role/addPermission.vue';

    export default {
        name: 'role-table',
        components: {
            AddRole, UpdateRole, DeleteRole, AddPermission
        },
        data() {
            return {
                addRoleModal: false,
                updateRoleModal: false,
                deleteRoleModal: false,
                addPermissionModal: false,
                chooseRoleId: 0,
                chooseRoleName: '',
                lang: 'zh-CN',
                valueText: 3,
                showModal: false,
                loading: false,
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        align: 'center',
                        key: 'id',
                        sortable: true
                    },
                    {
                        title: '角色名',
                        align: 'center',
                        key: 'roleName'
                    },
                    {
                        title: '角色描述',
                        align: 'center',
                        key: 'roleDesc'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.update(this.roleData, params.index);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.assignPermission(this.roleData, params.index);
                                        }
                                    }
                                }, '分配权限'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(this.roleData, params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                roleData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                roleName: ''
            };
        },
        methods: {
            ...mapActions(['getRole']),
            handleGetRole(sort) {
                this.getRole({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    roleName: this.roleName,
                    sort: sort
                }).then(res => {
                    if (res.data) {
                        this.total = parseInt(res.data.total);
                        this.pageNum = res.data.pageNum;
                        this.roleData = res.data.list;
                    } else {
                        this.$Message.error(this.$t('queryDataFailed'));
                    }
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.handleGetRole();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.handleGetRole();
            },
            update(val, index) {
                this.openModal(val[index]['id'], 'update');
            },
            remove(val, index) {
                this.openModal(val[index]['id'], 'delete', val[index]['roleName']);
            },
            assignPermission(val, index) {
                this.openModal(val[index]['id'], 'assign', val[index]['roleName']);
            },
            handleSearchs() {
                this.handleGetRole();
            },
            handleRefreshs() {
                this.handleGetRole();
            },
            sortClick(column) {
                var order = column.order === 'normal' ? 'asc' : column.order;
                var sort = column.key + ' ' + order;
                this.handleGetRole(sort);
            },
            openModal(rid, type = 'update', rname = '') {
                if (rid === null) {
                    this.addRoleModal = true;
                } else if (type === 'update') {
                    this.chooseRoleId = rid;
                    this.updateRoleModal = true;
                } else if (type === 'assign') {
                    this.chooseRoleId = rid;
                    this.addPermissionModal = true;
                } else {
                    this.chooseRoleId = rid;
                    this.chooseRoleName = rname;
                    this.deleteRoleModal = true;
                }
            },
            onModalCancel(type, reload = false) {
                switch (type) {
                    case 'add': {
                        this.addRoleModal = false;
                        break;
                    }
                    case 'update': {
                        this.updateRoleModal = false;
                        break;
                    }
                    case 'assign': {
                        this.addPermissionModal = false;
                        break;
                    }
                    case 'delete': {
                        this.deleteRoleModal = false;
                        break;
                    }
                }
                if (reload) this.handleGetRole();
            }
        },
        created() {
            this.handleGetRole();
        }
    };
</script>
